/**
 * @description 首页属性组件
 */
import React, { useEffect, useMemo, useState, useContext, useRef } from 'react'
import { Collapse, Form, Select, Input, Radio, Tooltip } from 'antd';
import {
  InfoCircleOutlined
} from '@ant-design/icons';

import { replaceObjectStyle, replaceCssStyle } from '@/utils/style';
import { setAttrForm } from '@/utils/AttrForm';
import AnimateOptions from '@/components/StylesWrapper/AnimateOptions.js';
import { AntIConTip, AntUrl, iconTextReg } from '@/utils/Const';
import { copyTemplate, pasteTemplate } from '@/utils/clipboard';
import { UpdateContext } from '@/store/updateContext';

import StyleWrapper from '@/components/StylesWrapper';
import AbIcon from '@/components/DecorateIcons/Ab_Icon';
import FileUpload from '@/components/StylesWrapper/FileUpload';
import CssEdit from '@/components/Monaco/CssEidt';
import AttrHeaderBtn from './Components/AttrHeaderBtn';

// 标题和后缀现实的开关
const titleShowOptions = [
  {
    label: '开',
    value: true
  },
  {
    label: '关',
    value: false
  }
]


function HomeAttr({ template2, onConfigEvent, setIsRightAttr, actKey }) {

  const updateCtx = useContext(UpdateContext)
  const [form] = Form.useForm()
  // css编辑器
  const [open, setOpen] = useState(false)
  // css编辑器实例
  const cssEditRef = useRef()

  // 更新style样式文件
  let upateStyleEvent = (keys) => {

    let divData = Object.assign({}, form.getFieldValue(keys))

    // keys数组的最后一项，就是key
    let key = keys.at(-1)
    replaceObjectStyle(actKey, key, divData)
  }

  // 组件css变化
  let cssChange = (value) => {
    form.setFieldValue('css', value)
    replaceCssStyle(actKey, value)
  }

  // 图标输入框变化事件，比普通输入框，多一个字符串转化逻辑
  let iconEvent = (keys, value) => {

    // 去除 空格、<、/> 
    let newValue = value.replace(iconTextReg, '')
    form.setFieldValue(keys, newValue)

    onConfigEvent(keys, newValue)
  }

  // 头部按钮事件
  let handleHeaderEvent = (key) => {
    switch (key) {

      // 打开组件css编辑
      case 'css':
        setOpen(true)
        break;

      // 复制模板
      case 'copy':
        copyTemplate(actKey, [], form)
        break;

      // 黏贴模板
      case 'paste':
        pasteTemplate(form, onConfigEvent, actKey)
        updateCtx.setUpdateFlag(pre => !pre)

        // 修改css编辑器的值
        cssEditRef.current.setValue(form.getFieldValue('css'))
        break;

      // 切换位置
      case 'position':
        setIsRightAttr((isRight) => !isRight)
        break;

      default:
        break;
    }
  }

  // -----------------------------------
  // 构造折叠面板的数据
  // -----------------------------------


  let items = useMemo(() => {
    let items = [
      {
        key: 'wrapper',
        label: '总盒子',
        children:
          <StyleWrapper form={form} preKeys={['wrap', 'default']} onStyleChange={() => upateStyleEvent(['wrap'])} />
      },
      {
        key: 'notice',
        label: '公告',
        children:
          <>
            <Form.Item
              label="开关"
              name={['base', 'notice_flag']}
            >
              <Radio.Group
                options={titleShowOptions}
                onChange={(e) => onConfigEvent(['base', 'notice_flag'], e.target.value)}
                optionType="button"
                buttonStyle="solid"
              />
            </Form.Item>

            <Collapse accordion items={[
              {
                key: 'box',
                label: '盒子',
                children:
                  <StyleWrapper form={form} preKeys={['notice', 'default']} onStyleChange={() => upateStyleEvent(['notice'])} />
              },
              {
                key: 'text',
                label: '标题',
                children:
                  <>
                    <Form.Item
                      label="文本"
                      name={['base', 'notice_text']}
                    >
                      <Input
                        onChange={(e) => onConfigEvent(['base', 'notice_text'], e.target.value)}
                      />
                    </Form.Item>
                    <StyleWrapper form={form} preKeys={['notice_title', 'default']} onStyleChange={() => upateStyleEvent(['notice_title'])} />
                  </>

              },
              {
                key: 'content',
                label: '内容',
                children:
                  <StyleWrapper form={form} preKeys={['notice_content', 'default']} onStyleChange={() => upateStyleEvent(['notice_content'])} />

              },
            ]}
            />

          </>
      },
      {
        key: 'title',
        label: '标题',
        children:
          <>
            <Form.Item
              label="开关"
              name={['base', 'title_flag']}
            >
              <Radio.Group
                options={titleShowOptions}
                onChange={(e) => onConfigEvent(['base', 'title_flag'], e.target.value)}
                optionType="button"
                buttonStyle="solid"
              />
            </Form.Item>

            <Form.Item
              label="动画属性"
              name={['base', 'title_animate']}
            >
              <Select
                allowClear
                options={AnimateOptions}
                onChange={(value) => onConfigEvent(['base', 'title_animate'], value)}
              />
            </Form.Item>

            <Collapse accordion items={[
              {
                key: 'box',
                label: '盒子',
                children:
                  <StyleWrapper form={form} preKeys={['title', 'default']} onStyleChange={() => upateStyleEvent(['title'])} />
              },
              {
                key: 'text',
                label: '文本',
                children:
                  <>
                    <Form.Item
                      label="开关"
                      name={['base', 'title_textFlag']}
                    >
                      <Radio.Group
                        options={titleShowOptions}
                        onChange={(e) => onConfigEvent(['base', 'title_textFlag'], e.target.value)}
                        optionType="button"
                        buttonStyle="solid"
                      />
                    </Form.Item>
                    <StyleWrapper form={form} preKeys={['title_text', 'default']} onStyleChange={() => upateStyleEvent(['title_text'])} />
                  </>
              },
              {
                key: 'img',
                label: '图片',
                children:
                  <>
                    <Form.Item
                      label="开关"
                      name={['base', 'title_img_flag']}
                    >
                      <Radio.Group
                        options={titleShowOptions}
                        onChange={(e) => onConfigEvent(['base', 'title_img_flag'], e.target.value)}
                        optionType="button"
                        buttonStyle="solid"
                      />

                    </Form.Item>

                    <FileUpload form={form} label='图片' name={['base', 'title_img_url']} onConfigEvent={onConfigEvent} />


                    <StyleWrapper form={form} preKeys={['title_img', 'default']} onStyleChange={() => upateStyleEvent(['title_img'])} />
                  </>
              },
            ]} />
          </>
      },
      {
        key: 'static',
        label: '统计',
        children:
          <Collapse accordion items={[
            {
              key: 'animates',
              label: '动画属性',
              children:
                <>
                  <Form.Item
                    label="统计1"
                    name={['base', 'static_animate1']}
                  >
                    <Select
                      allowClear
                      options={AnimateOptions}
                      onChange={(value) => onConfigEvent(['base', 'static_animate1'], value)}
                    />
                  </Form.Item>
                  <Form.Item
                    label="统计2"
                    name={['base', 'static_animate2']}
                  >
                    <Select
                      allowClear
                      options={AnimateOptions}
                      onChange={(value) => onConfigEvent(['base', 'static_animate2'], value)}
                    />
                  </Form.Item>
                  <Form.Item
                    label="统计3"
                    name={['base', 'static_animate3']}
                  >
                    <Select
                      allowClear
                      options={AnimateOptions}
                      onChange={(value) => onConfigEvent(['base', 'static_animate3'], value)}
                    />
                  </Form.Item>
                  <Form.Item
                    label="统计4"
                    name={['base', 'static_animate4']}
                  >
                    <Select
                      allowClear
                      options={AnimateOptions}
                      onChange={(value) => onConfigEvent(['base', 'static_animate4'], value)}
                    />
                  </Form.Item>
                  <Form.Item
                    label="统计5"
                    name={['base', 'static_animate5']}
                  >
                    <Select
                      allowClear
                      options={AnimateOptions}
                      onChange={(value) => onConfigEvent(['base', 'static_animate5'], value)}
                    />
                  </Form.Item>


                </>
            },
            {
              key: 'icons',
              label: 'icon图标',
              children:
                <>
                  <Form.Item
                    label="统计1"
                    name={['base', 'static_icon1']}
                  >
                    <Input
                      onChange={(e) => iconEvent(['base', 'static_icon1'], e.target.value)}
                      suffix={
                        <Tooltip title={AntIConTip}>
                          <InfoCircleOutlined
                            style={{
                              color: 'rgba(0,0,0,.45)',
                            }}
                            onClick={() => window.open(AntUrl, "_blank")}
                          />
                        </Tooltip>
                      }
                    />
                  </Form.Item>
                  <Form.Item
                    label="统计2"
                    name={['base', 'static_icon2']}
                  >
                    <Input
                      onChange={(e) => iconEvent(['base', 'static_icon2'], e.target.value)}
                    />
                  </Form.Item>
                  <Form.Item
                    label="统计3"
                    name={['base', 'static_icon3']}
                  >
                    <Input
                      onChange={(e) => iconEvent(['base', 'static_icon3'], e.target.value)}
                    />
                  </Form.Item>
                  <Form.Item
                    label="统计4"
                    name={['base', 'static_icon4']}
                  >
                    <Input
                      onChange={(e) => iconEvent(['base', 'static_icon4'], e.target.value)}
                    />
                  </Form.Item>
                  <Form.Item
                    label="统计5"
                    name={['base', 'static_icon5']}
                  >
                    <Input
                      onChange={(e) => iconEvent(['base', 'static_icon5'], e.target.value)}
                    />
                  </Form.Item>
                </>
            },
            {
              key: 'wrapper',
              label: '总盒子',
              children:
                <StyleWrapper form={form} preKeys={['static', 'default']} onStyleChange={() => upateStyleEvent(['static'])} />
            },
            {
              key: 'box',
              label:
                <Tooltip title='如需对特定盒子装修,在组件css里配置'>
                  盒子(公共)
                  <InfoCircleOutlined className='tooltip-icon' />
                </Tooltip>,
              children:
                <StyleWrapper form={form} preKeys={['static_box_common', 'default']} onStyleChange={() => upateStyleEvent(['static_box_common'])} />
            },
            {
              key: 'icon-box',
              label: '图标盒子',
              children:
                <StyleWrapper form={form} preKeys={['static_icon_box', 'default']} onStyleChange={() => upateStyleEvent(['static_icon_box'])} />
            },
            {
              key: 'icon',
              label: '图标',
              children:
                <StyleWrapper form={form} preKeys={['static_icon', 'default']} onStyleChange={() => upateStyleEvent(['static_icon'])} />
            },
            {
              key: 'info-box',
              label: 'info盒子',
              children:
                <StyleWrapper form={form} preKeys={['static_info_box', 'default']} onStyleChange={() => upateStyleEvent(['static_info_box'])} />
            },
            {
              key: 'count',
              label: 'info值',
              children:
                <StyleWrapper form={form} preKeys={['static_info_count', 'default']} onStyleChange={() => upateStyleEvent(['static_info_count'])} />
            },
            {
              key: 'label',
              label: 'info标题',
              children:
                <StyleWrapper form={form} preKeys={['static_info_label', 'default']} onStyleChange={() => upateStyleEvent(['static_info_label'])} />
            },
          ]} />


      },
      {
        key: 'calendar',
        label: '日历',
        children:
          <>
            <Form.Item
              label="动画"
              name={['base', 'calendar_animate']}
            >
              <Select
                allowClear
                options={AnimateOptions}
                onChange={(value) => onConfigEvent(['base', 'calendar_animate'], value)}
              />
            </Form.Item>

            <Collapse accordion items={[
              {
                key: 'box',
                label: '总盒子',
                children: <StyleWrapper form={form} preKeys={['calendar_box', 'default']} onStyleChange={() => upateStyleEvent(['calendar_box'])} />
              },
              {
                key: 'header',
                label: '头部',
                children:
                  <Collapse accordion items={[
                    {
                      key: 'box',
                      label: '盒子',
                      children: <StyleWrapper form={form} preKeys={['calendar_header', 'default']} onStyleChange={() => upateStyleEvent(['calendar_header'])} />

                    },
                    {
                      key: 'pre-year',
                      label: '上一年',
                      children: <StyleWrapper form={form} preKeys={['calendar_pre_year', 'default']} onStyleChange={() => upateStyleEvent(['calendar_pre_year'])} />
                    },
                    {
                      key: 'pre-year-hover',
                      label: '上一年-悬浮',
                      children: <StyleWrapper form={form} preKeys={['calendar_pre_year', 'hover']} onStyleChange={() => upateStyleEvent(['calendar_pre_year'])} />
                    },
                    {
                      key: 'pre-month',
                      label: '上一月',
                      children: <StyleWrapper form={form} preKeys={['calendar_pre_month', 'default']} onStyleChange={() => upateStyleEvent(['calendar_pre_month'])} />
                    },
                    {
                      key: 'pre-month-hover',
                      label: '上一月-悬浮',
                      children: <StyleWrapper form={form} preKeys={['calendar_pre_month', 'hover']} onStyleChange={() => upateStyleEvent(['calendar_pre_month'])} />
                    },
                    {
                      key: 'yearmonth',
                      label: '日期',
                      children: <StyleWrapper form={form} preKeys={['calendar_yearmonth', 'default']} onStyleChange={() => upateStyleEvent(['calendar_yearmonth'])} />
                    },
                    {
                      key: 'yearmonth-hover',
                      label: '日期-悬浮',
                      children: <StyleWrapper form={form} preKeys={['calendar_yearmonth', 'hover']} onStyleChange={() => upateStyleEvent(['calendar_yearmonth'])} />
                    },
                    {
                      key: 'next-month',
                      label: '下一月',
                      children: <StyleWrapper form={form} preKeys={['calendar_next_month', 'default']} onStyleChange={() => upateStyleEvent(['calendar_next_month'])} />
                    },
                    {
                      key: 'next-month-hover',
                      label: '下一月-悬浮',
                      children: <StyleWrapper form={form} preKeys={['calendar_next_month', 'hover']} onStyleChange={() => upateStyleEvent(['calendar_next_month'])} />
                    },
                    {
                      key: 'next-year',
                      label: '下一年',
                      children: <StyleWrapper form={form} preKeys={['calendar_next_year', 'default']} onStyleChange={() => upateStyleEvent(['calendar_next_year'])} />
                    },
                    {
                      key: 'next-year-hover',
                      label: '下一年-悬浮',
                      children: <StyleWrapper form={form} preKeys={['calendar_next_year', 'hover']} onStyleChange={() => upateStyleEvent(['calendar_next_year'])} />
                    },

                  ]} />
              },
              {
                key: 'table',
                label: 'table盒子',
                children: <StyleWrapper form={form} preKeys={['calendar_table', 'default']} onStyleChange={() => upateStyleEvent(['calendar_table'])} />
              },
              {
                key: 'table-header',
                label: 'head 表头(星期)',
                children:
                  <Collapse accordion items={[
                    {
                      key: 'box',
                      label: 'tr 行盒子',
                      children: <StyleWrapper form={form} preKeys={['calendar_tr', 'default']} onStyleChange={() => upateStyleEvent(['calendar_tr'])} />
                    },
                    {
                      key: 'item',
                      label: 'th 格子',
                      children: <StyleWrapper form={form} preKeys={['calendar_th', 'default']} onStyleChange={() => upateStyleEvent(['calendar_th'])} />
                    },
                  ]} />
              },
              {
                key: 'table-body',
                label: 'body',
                children:
                  <Collapse accordion items={[
                    {
                      key: 'row',
                      label: 'tr 行盒子',
                      children: <StyleWrapper form={form} preKeys={['calendar_body_tr', 'default']} onStyleChange={() => upateStyleEvent(['calendar_body_tr'])} />
                    },
                    {
                      key: 'td',
                      label: 'td 盒子',
                      children: <StyleWrapper form={form} preKeys={['calendar_body_td', 'default']} onStyleChange={() => upateStyleEvent(['calendar_body_td'])} />
                    },
                    {
                      key: 'table-td-common',
                      label: 'td格子-基础',
                      children:
                        <Collapse accordion items={[
                          {
                            key: 'normal',
                            label: '盒子',
                            children: <StyleWrapper form={form} preKeys={['calendar_text', 'default']} onStyleChange={() => upateStyleEvent(['calendar_text'])} />
                          },
                          {
                            key: 'normal-hover',
                            label: '盒子-悬浮',
                            children: <StyleWrapper form={form} preKeys={['calendar_text', 'hover']} onStyleChange={() => upateStyleEvent(['calendar_text'])} />
                          },
                          {
                            key: 'new',
                            label: '新历',
                            children: <StyleWrapper form={form} preKeys={['calendar_text_new', 'default']} onStyleChange={() => upateStyleEvent(['calendar_text_new'])} />
                          },
                          {
                            key: 'old',
                            label: '农历/节日',
                            children: <StyleWrapper form={form} preKeys={['calendar_text_old', 'default']} onStyleChange={() => upateStyleEvent(['calendar_text_old'])} />
                          },
                        ]} />
                    },
                    {
                      key: 'table-td-festival',
                      label: 'td格子-基础 + 节日',
                      children:
                        <Collapse accordion items={[
                          {
                            key: 'normal',
                            label: '盒子',
                            children: <StyleWrapper form={form} preKeys={['calendar_festival', 'default']} onStyleChange={() => upateStyleEvent(['calendar_festival'])} />
                          },
                          {
                            key: 'normal-hover',
                            label: '盒子-悬浮',
                            children: <StyleWrapper form={form} preKeys={['calendar_festival', 'hover']} onStyleChange={() => upateStyleEvent(['calendar_festival'])} />
                          },
                          {
                            key: 'new',
                            label: '新历',
                            children: <StyleWrapper form={form} preKeys={['calendar_festival_new', 'default']} onStyleChange={() => upateStyleEvent(['calendar_festival_new'])} />
                          },
                          {
                            key: 'old',
                            label: '农历/节日',
                            children: <StyleWrapper form={form} preKeys={['calendar_festival_old', 'default']} onStyleChange={() => upateStyleEvent(['calendar_festival_old'])} />
                          },
                        ]} />
                    },
                    {
                      key: 'table-td-other',
                      label: 'td格子-基础 + 非本月',
                      children:
                        <Collapse accordion items={[
                          {
                            key: 'normal',
                            label: '盒子',
                            children: <StyleWrapper form={form} preKeys={['calendar_other', 'default']} onStyleChange={() => upateStyleEvent(['calendar_other'])} />
                          },
                          {
                            key: 'normal-hover',
                            label: '盒子-悬浮',
                            children: <StyleWrapper form={form} preKeys={['calendar_other', 'hover']} onStyleChange={() => upateStyleEvent(['calendar_other'])} />
                          },
                          {
                            key: 'new',
                            label: '新历',
                            children: <StyleWrapper form={form} preKeys={['calendar_other_new', 'default']} onStyleChange={() => upateStyleEvent(['calendar_other_new'])} />
                          },
                          {
                            key: 'old',
                            label: '农历/节日',
                            children: <StyleWrapper form={form} preKeys={['calendar_other_old', 'default']} onStyleChange={() => upateStyleEvent(['calendar_other_old'])} />
                          },
                        ]} />
                    },
                    {
                      key: 'table-td-today',
                      label: 'td格子-基础 + 今天',
                      children:
                        <Collapse accordion items={[
                          {
                            key: 'normal',
                            label: '盒子',
                            children: <StyleWrapper form={form} preKeys={['calendar_today', 'default']} onStyleChange={() => upateStyleEvent(['calendar_today'])} />
                          },
                          {
                            key: 'normal-hover',
                            label: '盒子-悬浮',
                            children: <StyleWrapper form={form} preKeys={['calendar_today', 'hover']} onStyleChange={() => upateStyleEvent(['calendar_today'])} />
                          },
                          {
                            key: 'new',
                            label: '新历',
                            children: <StyleWrapper form={form} preKeys={['calendar_today_new', 'default']} onStyleChange={() => upateStyleEvent(['calendar_today_new'])} />
                          },
                          {
                            key: 'old',
                            label: '农历/节日',
                            children: <StyleWrapper form={form} preKeys={['calendar_today_old', 'default']} onStyleChange={() => upateStyleEvent(['calendar_today_old'])} />
                          },
                        ]} />
                    }

                  ]} />
              },
            ]} />
          </>

      },
      {
        key: 'chart',
        label: '图表-盒子装修',
        children:
          <Collapse accordion items={[
            {
              key: 'animates',
              label: '动画属性',
              children:
                <>
                  <Form.Item
                    label="图表1"
                    name={['base', 'chart_animate1']}
                  >
                    <Select
                      allowClear
                      options={AnimateOptions}
                      onChange={(value) => onConfigEvent(['base', 'chart_animate1'], value)}
                    />
                  </Form.Item>
                  <Form.Item
                    label="图表2"
                    name={['base', 'chart_animate2']}
                  >
                    <Select
                      allowClear
                      options={AnimateOptions}
                      onChange={(value) => onConfigEvent(['base', 'chart_animate2'], value)}
                    />
                  </Form.Item>
                  <Form.Item
                    label="图表3"
                    name={['base', 'chart_animate3']}
                  >
                    <Select
                      allowClear
                      options={AnimateOptions}
                      onChange={(value) => onConfigEvent(['base', 'chart_animate3'], value)}
                    />
                  </Form.Item>
                  <Form.Item
                    label="图表4"
                    name={['base', 'chart_animate4']}
                  >
                    <Select
                      allowClear
                      options={AnimateOptions}
                      onChange={(value) => onConfigEvent(['base', 'chart_animate4'], value)}
                    />
                  </Form.Item>
                  <Form.Item
                    label="图表5"
                    name={['base', 'chart_animate5']}
                  >
                    <Select
                      allowClear
                      options={AnimateOptions}
                      onChange={(value) => onConfigEvent(['base', 'chart_animate5'], value)}
                    />
                  </Form.Item>


                </>
            },
            {
              key: '1',
              label: '图表1',
              children: <StyleWrapper form={form} preKeys={['chart_1', 'default']} onStyleChange={() => upateStyleEvent(['chart_1'])} />
            },
            {
              key: '1-hover',
              label: '图表1-悬浮',
              children: <StyleWrapper form={form} preKeys={['chart_1', 'hover']} onStyleChange={() => upateStyleEvent(['chart_1'])} />
            },
            {
              key: '2',
              label: '图表2',
              children: <StyleWrapper form={form} preKeys={['chart_2', 'default']} onStyleChange={() => upateStyleEvent(['chart_2'])} />
            },
            {
              key: '2-hover',
              label: '图表2-悬浮',
              children: <StyleWrapper form={form} preKeys={['chart_2', 'hover']} onStyleChange={() => upateStyleEvent(['chart_2'])} />
            },
            {
              key: '3',
              label: '图表3',
              children: <StyleWrapper form={form} preKeys={['chart_3', 'default']} onStyleChange={() => upateStyleEvent(['chart_3'])} />
            },
            {
              key: '3-hover',
              label: '图表3-悬浮',
              children: <StyleWrapper form={form} preKeys={['chart_3', 'hover']} onStyleChange={() => upateStyleEvent(['chart_3'])} />
            },
            {
              key: '4',
              label: '图表4',
              children: <StyleWrapper form={form} preKeys={['chart_4', 'default']} onStyleChange={() => upateStyleEvent(['chart_4'])} />
            },
            {
              key: '4-hover',
              label: '图表4-悬浮',
              children: <StyleWrapper form={form} preKeys={['chart_4', 'hover']} onStyleChange={() => upateStyleEvent(['chart_4'])} />
            },
            {
              key: '5',
              label: '图表5',
              children: <StyleWrapper form={form} preKeys={['chart_5', 'default']} onStyleChange={() => upateStyleEvent(['chart_5'])} />
            },
            {
              key: '5-hover',
              label: '图表5-悬浮',
              children: <StyleWrapper form={form} preKeys={['chart_5', 'hover']} onStyleChange={() => upateStyleEvent(['chart_5'])} />
            },
          ]} />
      }
    ]
    return items
  }, [
    updateCtx.updateFlag
  ])


  useEffect(() => {
    setAttrForm(form)
  }, [form])

  return (
    <>

      <Form
        name='home'
        form={form}
        initialValues={template2}
        labelCol={{
          span: 6,
        }
        }
        autoComplete="off"
        spellCheck="false"
      >

        {/* 按钮区域 */}
        <AttrHeaderBtn onClickEvent={handleHeaderEvent} />

        {/* 对象形式的样式编辑 */}
        <Collapse accordion destroyInactivePanel size='middle' items={items} />


      </Form>

      {/* 字符串形式的样式编辑 */}
      <CssEdit value={template2.css} open={open} onValueChange={cssChange} setOpen={setOpen} ref={cssEditRef} />

    </>

  )
}
export default React.memo(HomeAttr) 